<template>
  <div class="content">
    <div class="btn flex-end">
      <div class="btn-blue2" @click="add">添加</div>
    </div>
    <table class="Datatable">
      <thead>
        <tr>
          <th></th>
          <th>职位名称</th>
          <th>职位描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="total != 0">
        <tr v-for="(item,index) in tableData" :key="index">
          <td>{{ item.roleId }}</td>
          <td>
            <span :class="['admin',item.roleName==='超级管理员'?'super':'']">{{ item.roleName }}</span>
          </td>
          <td
            @mouseenter="showtip(item.roleId)"
            @mouseleave="tipindex = 0"
            class="tooltips"
          >
            <div class="text">{{ item.roleDesc }}</div>
            <div v-if="item.roleId === tipindex" class="tip">
              <p>{{ item.roleDesc }}</p>
            </div>
          </td>
          <td v-if="item.roleName!='超级管理员'">
            <span class="ck cp download" @click="edit(item.roleId)">编辑</span>
            <span class="ck cp delete" @click="del(item.roleId)">删除</span>
          </td>
          <td v-else>
            <span class="ck  download disable" >编辑</span>
            <span class="ck  delete disable" >删除</span>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="4">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <div class="flex-end">
      <el-pagination
        v-if="total!=0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      size: 10,
      checkboxList: [],
      checked: false,
      tipindex: 0,
      total: 0
    }
  },
  computed: {
    tableData () {
      // return this.$store.state.feedback.tableData.slice(
      //   (this.currentPage - 1) * this.size,
      //   this.currentPage * this.size
      // )
      return this.$store.state.systemManage.positionManageData.tableData
    },
    tableDataAll () {
      return this.$store.state.systemManage.positionManageData.tableData
    }
  },
  created () {
    this.getList()
  },

  methods: {
    getList () {
      this.$store.dispatch('systemManage/getPositionListData', { page: this.currentPage - 1, size: this.size }).then(res => {
        this.total = res.data.size
      }).catch(res => {
        this.$message({
          type: 'error',
          message: res,
          duration: 1000
        })
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getList()
    },
    handleSizeChange (size) {
      this.size = size
      this.getList()
    },
    checkedAll () {
      // console.log(this.checkboxList)
      if (this.checked) {
        // 实现反选
        this.checkboxList = []
      } else {
        // 实现全选
        this.checkboxList = []
        this.tableData.forEach((item) => {
          this.checkboxList.push(item.id)
        })
      }
    },

    edit (id) {
      // alert(id)
      sessionStorage.setItem('roleId', id)
      this.$router.push('/systemManage/levelManage/edit')
    },
    del (id) {
      // this.$store.dispatch('systemManage/deletePositionData', { roleId: id })
      this.$store.dispatch('systemManage/deletePositionData', { roleId: id }).then(res => {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 1000
        })
        this.getList()
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err,
          duration: 1000
        })
      })
    },
    showtip (id) {
      this.tipindex = id
    },
    add () {
      this.$router.push('/systemManage/levelManage/add')
      this.$store.dispatch('systemManage/positionSelectData').then(res => {
        // console.log(res)
      }).catch(res => {
        this.$message({
          type: 'error',
          message: res,
          duration: 1000
        })
      })
    }
  },
  watch: {
    // 深度 watcher
    checkboxList: {
      handler: function (val, oldVal) {
        // console.log(this.checkboxList)
        if (this.checkboxList.length === this.tableData.length) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 934px;
  // margin-top: 24px;
  // min-height: 100%;
  background-color: #fff;
  padding: 30px 24px;
  padding-top: 12px;
  padding-bottom: 120px;
  border-radius: 8px;
  table {
    margin-top: 22px;
    th,
    td {
      &:nth-child(1) {
        width: 60px;
      }
      &:nth-child(2) {
        width: 290px;
      }
      &:nth-child(3) {
        width: 773px;
      }
    }
  }
  .admin {
    display: inline-block;
    // width: 84px;
    padding: 0px 17px;
    // height: 30px;
    opacity: 1;
    background: #eef0ff;
    border-radius: 4px;
    line-height: 30px;
    color: #304eec;
  }
  .super{
      // display: inline-block;
    // width: 84px;
    // padding: 0px 17px;
    // height: 30px;
    // opacity: 1;
    background: #fff5eb;
    // border-radius: 4px;
    // line-height: 30px;
    color: #FA8D00;
  }
}
</style>
